<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时空回音 - Time Echo</title>
    <!-- 移除base href以支持本地直接运行 -->
    <script>
        // 确保在任何环境下都使用相对路径
        console.log('🚀 初始化游戏路径系统...');
        console.log('📜 当前协议:', window.location.protocol);
        console.log('🏠 当前主机:', window.location.hostname);
    </script>
    <!-- 确保所有资源路径正确 -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 语言切换按钮 -->
    <div class="language-toggle">
        <button id="langToggle" class="lang-btn">EN</button>
    </div>

    <!-- 主菜单 -->
    <div id="mainMenu" class="screen active">
        <div class="menu-container">
            <h1 class="game-title" data-i18n="title">时空回音</h1>
            <h2 class="game-subtitle" data-i18n="subtitle">Time Echo</h2>
            <div class="menu-buttons">
                <button class="menu-btn" id="newGameBtn" data-i18n="newGame">开始新游戏</button>
                <button class="menu-btn" id="continueBtn" data-i18n="continue">继续游戏</button>
                <button class="menu-btn" id="achievementsBtn" data-i18n="achievements">成就</button>
                <button class="menu-btn" id="timelineBtn" data-i18n="timeline">时间线</button>
                <button class="menu-btn" id="settingsBtn" data-i18n="settings">设置</button>
                <button class="menu-btn" id="fireworksBtn" data-i18n="fireworks">烟花</button>
            </div>
        </div>
        <div class="bg-particles"></div>
    </div>

    <!-- 游戏界面 -->
    <div id="gameScreen" class="screen">
        <div class="game-container">
            <!-- 故事显示区域 -->
            <div class="story-panel">
                <div class="scene-image">
                    <img id="sceneImg" src="" alt="Scene">
                </div>
                <div class="story-text">
                    <h3 id="sceneTitle" class="scene-title"></h3>
                    <p id="storyContent" class="story-content"></p>
                </div>
            </div>

            <!-- 选择按钮区域 -->
            <div class="choices-panel">
                <div id="choicesContainer" class="choices-container"></div>
            </div>

            <!-- 游戏UI -->
            <div class="game-ui">
                <div class="ui-left">
                    <button id="menuBtn" class="ui-btn" data-i18n="menu">菜单</button>
                    <button id="saveBtn" class="ui-btn" data-i18n="save">保存</button>
                </div>
                <div class="ui-right">
                    <div class="progress-indicator">
                        <span data-i18n="chapter">章节</span> <span id="chapterNum">1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 成就界面 -->
    <div id="achievementsScreen" class="screen">
        <div class="achievements-container">
            <h2 data-i18n="achievements">成就</h2>
            <div id="achievementsList" class="achievements-list"></div>
            <button class="back-btn" data-i18n="back">返回</button>
        </div>
    </div>

    <!-- 时间线界面 -->
    <div id="timelineScreen" class="screen">
        <div class="timeline-container">
            <h2 data-i18n="timeline">时间线</h2>
            <div id="timelineVisualization" class="timeline-viz"></div>
            <button class="back-btn" data-i18n="back">返回</button>
        </div>
    </div>

    <!-- 设置界面 -->
    <div id="settingsScreen" class="screen">
        <div class="settings-container">
            <h2 data-i18n="settings">设置</h2>
            <div class="settings-options">
                <div class="setting-item">
                    <label data-i18n="textSpeed">文字速度</label>
                    <input type="range" id="textSpeed" min="1" max="5" value="3">
                </div>
                <div class="setting-item">
                    <label data-i18n="soundEnabled">音效</label>
                    <input type="checkbox" id="soundEnabled" checked>
                </div>
                <div class="setting-item">
                    <label data-i18n="autoSave">自动保存</label>
                    <input type="checkbox" id="autoSave" checked>
                </div>
            </div>
            <button class="back-btn" data-i18n="back">返回</button>
        </div>
    </div>

    <!-- 加载界面 -->
    <div id="loadingScreen" class="screen">
        <div class="loading-container">
            <div class="loading-spinner"></div>
            <p data-i18n="loading">加载中...</p>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/imagePreloader.js"></script>
    <script src="js/multiLanguageTranslations.js"></script>
    <script src="js/i18n.js"></script>
    <script src="js/fireworksSystem.js"></script>
    <script src="js/gameEngine.js"></script>
    <script src="js/storyManager.js"></script>
    <script src="js/uiManager.js"></script>
    <script src="js/saveSystem.js"></script>
    <script src="js/achievements.js"></script>
    <!-- 新增扩展系统 -->
    <script src="js/extendedStory.js"></script>
    <script src="js/extendedAchievements.js"></script>
    <script src="js/extendedTranslations.js"></script>
    <script src="js/endingsManager.js"></script>
    <script src="js/megaStoryExpansion.js"></script>
    <script src="js/main.js"></script>
    
    <!-- 初始化验证脚本 -->
    <script>
        // 等待DOM完全加载后验证系统
        window.addEventListener('load', () => {
            setTimeout(() => {
                console.log('🔍 系统初始化验证:');
                
                // 检查全局对象
                const systems = {
                    'TimeEchoGame': window.timeEchoGame,
                    'UIManager': window.uiManager,
                    'GameEngine': window.gameEngine,
                    'I18n': window.i18n,
                    'AchievementSystem': window.achievementSystem,
                    'StoryManager': window.storyManager,
                    'SaveSystem': window.saveSystem,
                    'ExtendedStoryData': window.extendedStoryData,
                    'ExtendedAchievements': window.extendedAchievements,
                    'ExtendedTranslations': window.extendedTranslations,
                    'EndingsManager': window.endingsManager
                };
                
                let allSystemsReady = true;
                Object.entries(systems).forEach(([name, system]) => {
                    if (system) {
                        console.log(`✓ ${name}: 已加载`);
                    } else {
                        console.error(`❌ ${name}: 未加载`);
                        allSystemsReady = false;
                    }
                });
                
                // 检查按钮元素
                const buttons = ['newGameBtn', 'continueBtn', 'achievementsBtn', 'timelineBtn', 'settingsBtn', 'langToggle'];
                buttons.forEach(btnId => {
                    const btn = document.getElementById(btnId);
                    if (btn) {
                        console.log(`✓ 按钮 ${btnId}: 存在`);
                    } else {
                        console.error(`❌ 按钮 ${btnId}: 缺失`);
                    }
                });
                
                if (allSystemsReady) {
                    console.log('🎉 所有系统初始化成功！');
                } else {
                    console.error('⚠️ 部分系统初始化失败，请检查控制台错误');
                }
            }, 1000);
        });
    </script>
</body>
</html>